<template>
  <div>
    <div class="articleList">
      <div>
        <!-- <h2 class="title">Emcascript新特性</h2> -->
        <h2 class="title">{{ articleData.title }}</h2>
        <!-- <div class="articleInfo">
          你可能已经听说过EMCAScript6（ES6）了，这是下一个版本的Javascript，它包含了一些很棒的新特性。这些特性拥有不同程度的复杂性，对于简单的脚本和复杂的应用程序都非常的有用。本文将盘点一些ES6的新特性，这些特性都可以用在你日常的编码中。
        </div> -->
        <div class="articleInfo">{{ articleData.introduce }}</div>
        <div class="articleType">
          <i class="el-icon-date"></i>
          <!-- 2020-02-25 -->{{ articleData.addTime }} <i class="el-icon-view"></i
          ><!--  7人  -->{{ articleData.view_count }}<i class="el-icon-folder"></i
          ><!--  技能 -->{{ articleData.typeName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["articleData"]
  /* {
    articleData: {
      type: Object,
      default() {
        return {};
      },
      title: String,articleInfo:String,createTIme:String,readNum:Number,articleType:String
    },
  }, */
};
</script>

<style lang="less" scoped>
.articleList {
  cursor: pointer;
  padding: 10px;
  border-bottom: 2px solid #ccc;
  margin: 12px 0;
  & .title {
    padding-bottom: 10px;
    color: rgb(24, 144, 252);
  }
  & .articleType i:not(:nth-child(1)) {
    margin-left: 15px;
  }
  & .articleType i {
    margin-right: 3px;
  }
  & .articleInfo {
    padding-bottom: 10px;
    color: rgb(152, 152, 152);
  }
}
</style>
